<template>
  <div>
    
    <div class="tabs">
      <!-- <a href="#/discover">发现音乐</a>
      <a href="#/my">我的</a>
      <a href="#/friend">关注</a> -->

      <!-- 好处1：如果用router-link，不管是什么路由模式都能跳转 -->
      <!-- 
        好处2：它内部自动实现了点谁谁就会有 router-link-active 这个类
        我们只要给这个类写号样式，就会自动拥有点谁谁高亮的效果
      -->
      <router-link to="/discover?name=jack&age=16">发现音乐</router-link>
      <!-- 它对用的规则是： /my/:id/:xx  -->
      <!-- 也就是说路径上要传2个参数，参数分别是id和xx，所以这里代表把104给了id，把jack给了xx -->
      <router-link to="/my/104/jack">我的</router-link>
      <router-link to="/friend">关注</router-link>
      
    </div>

    <router-view />
  </div>
</template>

<script>
export default {

}
</script>

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .tabs {
    display: flex;
    background: #242424;
    height: 60px;
    align-items: center;
  }
  .tabs a {
    flex:1;
    text-decoration: none;
    color: #fff;
    text-align: center;
  }


  .router-link-active{
    color: red !important;
  }

</style>